<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音乐播放器</title>
  <link type="text/css" rel="stylesheet" href="./css/index.css"/>
</head>
<body>
  <div id="app">
    <div class="mask_img"></div>
    <div class="mask_gb"></div>

    <div class="app_left">

<!--      歌曲列表,动态绑定,歌曲由JS绑定-->
      <ul class="music_list"></ul>

<!--      音乐的进度条-->
      <div class="music_control">
<!--        上一首-->
        <div id="upper_btn" class="iconfont music_control_btn">
          &#xe78a;
        </div>

        <div id="play_btn" class="iconfont music_control_btn">
          &#xe624;
        </div>
<!--        下一首-->
        <div id="lower_btn" class="iconfont music_control_btn">
          &#xe7a5;
        </div>

<!--        进度条-->
        <div id="music_progress_box">
<!--          已经播放的长度-->
          <div id="music_progress_played"></div>
<!--          进度条的小按钮-->
          <div id="music_progress"></div>
        </div>

<!--        播放的格式-->
        <div id="play_type" class="iconfont ">
          <ul>
            <li>&#xea75;</li>
            <li>&#xea76;</li>
            <li>&#xea77;</li>
          </ul>
          <span>&#xea76;</span>
        </div>


      </div>
    </div>


    <div class="app_right">
<!--      音乐封面-->
      <div class="music_cover_box">
        <img class="music_cover_logo" src="./image/cover.png">
        <img class="music_cover_img" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3dEvA4aEcT2P79gRTAftnwHaHa?pid=ImgDet&rs=1">
      </div>
<!--      歌词部分-->
      <div class="music_lrc">
        <ul class="music_lrc_ul"></ul>
      </div>
    </div>


    <div class="voice_mask iconfont">
      &#xf01f4;<span id="voice_number">100%</span>
    </div>


  </div>


  <video style="display: none" src="" autoplay></video>
  <script src="./js/LrcHandle.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
